<template>
	<div class="user-detail">
		<el-button @click="isshow" style=border:none>个人信息 &nbsp;&nbsp;&nbsp;</el-button>
		<el-button @click="ispass" style=border:none>修改密码</el-button>
	</div>
	<div class="user-detail" v-if="show">
		<div class="user-detail-top">基本信息</div>
		<div class="user-ico" disabled="true">
			<span>头像:&nbsp;</span>

			<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
				:on-preview="handlePreview" :on-remove="handleRemove" list-type="picture-card"
				:before-upload="beforeAvatarUpload" :auto-upload="false">
				<img src="../assets/logo.png" class="avatar">


			</el-upload>

		</div>
		<div class="user-detail-group">
			<span>推荐上传jpg/png文件，且不超过1024kb</span>
			<div class="user-item">
				<span>昵称:</span>
				<span v-for="currency in info " v-bind:key="currency">{{currency.username}}</span>



			</div>

			<div class="user-item">
				<span>手机:</span>
				<span v-for="currency in info" v-bind:key='currency'>{{currency.phone}}</span>
			</div>


			<div class="user-item">
				<span>性别:</span>
				<span v-for="currency in info " v-bind:key='currency'>{{currency.sex }}</span>
			</div>
			<div class="user-item">
				<span>收货地址1:</span>
				<span v-for="currency in info " v-bind:key='currency'>{{currency.address2}}{{currency.address21}}</span>
			</div>
			<div class="user-item">
				<span>收货地址2:</span>
				<span v-for="currency in info " v-bind:key='currency'>{{currency.address1}}{{currency.address11}}</span>
			</div>


			<el-button type="primary" @click="check()" placement="right">修改</el-button>




			<el-dialog title="个人信息" v-model="dialogFormVisible">
				<el-form :model="info">
					<el-form-item label="昵称">
						<el-input v-model="info.data.username"></el-input>
					</el-form-item>
					<el-form-item label="手机">
						<el-input type='tel' v-model="info.data.phone" oninput="value=value.replace(/[^\d]/g,'')"
							maxlength="11" placeholder="请输入手机号"></el-input>
					</el-form-item>
					<el-form-item label="性别">
						<el-select v-model="info.data.sex">
							<el-option label="男" value="男"></el-option>
							<el-option label="女" value="女"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="收货地址1">
						<el-col :span="11">
							<el-select placeholder="选择省份" v-model="info.data.address1" style="width: 100%;">
								<el-option label="广东省" value="广东省"></el-option>
							</el-select>
						</el-col>
						<el-col class="line" :span="2">-</el-col>
						<el-col :span="11">
							<el-select placeholder="选择市县" v-model="info.data.address11" style="width: 100%;">
								<el-option label="广州市" value="广州市"></el-option>
								<el-option label="深圳市" value="深圳市"></el-option>
							</el-select>
						</el-col>
					</el-form-item>

					<el-form-item label="收货地址2">
						<el-col :span="11">
							<el-select placeholder="选择省份" v-model="info.data.address2" style="width: 100%;">
								<el-option label="广东省" value="广东省"></el-option>
							</el-select>
						</el-col>
						<el-col class="line" :span="2">-</el-col>
						<el-col :span="11">
							<el-select placeholder="选择市县" v-model="info.data.address21" style="width: 100%;">
								<el-option label="广州市" value="广州市"></el-option>
								<el-option label="深圳市" value="深圳市"></el-option>
							</el-select>
						</el-col>
					</el-form-item>

				</el-form>

				<template v-slot:footer class="dialog-footer">
					<el-button @click="inputcheck()">取 消</el-button>
					<el-button type="primary" @click="inputcheck2()">确 定</el-button>
				</template>
			</el-dialog>


		</div>
	</div>
	<div class="password" v-else>
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="原密码 :" prop="pad">
				<el-input type="password" v-model="ruleForm.pad" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="密码 :" prop="pass">
				<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="确认密码 :" prop="checkPass">
				<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			var Pass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.ruleForm.pad !== this.info.data.password) {
						callback(new Error('密码错误'));

					}
					callback();
				}
			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));

				} else if (value !== this.ruleForm.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();

				}
			};
			return {
				info: null,
				show: true,
				pass: false,

				imageUrl: 'true',
				dialogFormVisible: false,

				formLabelWidth: '120px',

				ruleForm: {
					pass: '',
					checkPass: '',
					pad: ''
				},
				rules: {
					pad: [{
						validator: Pass,
						trigger: 'blur'
					}],
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur'
					}],

				}
			}

		},
		mounted() {
			axios//测试uid为1310000000
				.get('http://localhost:8081/user/test?', {
					params: {
						uid: this.$store.getters.getUser.uid
					}
				})
				.then(response => (this.info = response.data))
		},
		methods: {

			beforeAvatarUpload(file) {
				console.log('hello');
				const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
				const isLt2M = file.size / 1024 / 1024 < 1;
				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			handleAvatarChange(file) {
				this.user_avatar_imgUrl = URL.createObjectURL(file.raw);
				this.user_avatar = file.raw;
			},


			isshow() {
				this.show = true;
			},
			ispass() {
				this.show = false;

			},
			check() {
				localStorage.setItem('obj', JSON.stringify(this.sizeForm))
				this.dialogFormVisible = true;
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('修改成功!');
						this.info.data.password = this.ruleForm.pass;
						this.$refs[formName].resetFields();
						return axios({
							method: 'post',
							url: 'http://localhost:8081/user/updateByPrimaryKey?',
							params: {
								uid:this.$store.getters.getUser.uid,
								password:this.info.data.password,
								username:this.info.data.username,
								avatar:this.info.data.avatar,
								sex:this.info.data.sex,
								phone:this.info.data.phone,
								address1:this.info.data.address1,
								address11:this.info.data.address11,
								address2:this.info.data.address2,
								address21:this.info.data.address21,
							}
						})

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			inputcheck() {
				let Item = JSON.parse(localStorage.getItem('obj'))
				this.sizeForm = Item
				this.dialogFormVisible = false
			},
			inputcheck2() {
				this.dialogFormVisible = false
				
				return axios({
					method: 'get',
					url: 'http://localhost:8081/user/updateByPrimaryKey?',
					params: {
						
						uid:this.$store.getters.getUser.uid,
						username:this.info.data.username,
						password:this.info.data.password,
						avatar:this.info.data.avatar,
						sex:this.info.data.sex,
						phone:this.info.data.phone,
						address1:this.info.data.address1,
						address11:this.info.data.address11,
						address2:this.info.data.address2,
						address21:this.info.data.address21,
						
					},
					
				})
			}

		}
	}
</script>

<style scoped>
	.demo-ruleForm {
		margin-left: 180px;
		margin-bottom: 30%;
		width: 60%;
		margin-top: 50px;
	}

	.el-upload-list__item-preview {
		display: none;
	}

	.el-icon-zoom-in {
		display: none
	}

	.user-detail {
		width: 70%;
		height: 100%;
		margin: 20px auto;
		border: none;


	}

	.user-detail-top {
		width: 100%;
		height: 60px;
		line-height: 60px;
		padding-left: 10px;
		font-weight: bold;
	}

	.user-detail-group .user-icon {
		height: 60px;
		padding: 0 10px;
		background-color: #fff;
		border-bottom: 1px solid #e0e0e0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-detail-group .user-item {
		height: 50px;
		padding: 0 10px;
		background-color: #fff;
		border-bottom: 1px solid #e0e0e0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-detail-group input {
		border: 1px solid #ccc;
		outline: none;
		text-align: right;
		width: 200px;
	}

	.user-detail-group button {
		margin: 60px 0;
		width: 15%;
		font-size: 16px;
		border-radius: 10px;
		border: none;
		outline: none;
	}

	.right-title-color {
		color: #999;
		font-size: 14px;
	}

	.avatar-uploader {
		overflow: hidden;
		width: 200px;
		height: 150px;
	}



	.user-ico {
		height: 200px;
	}

	.avatar {
		position: absolute;
		width: 100px;
		height: 100px;
		display: none;

	}
</style>
